<template>
  <div class="diy_edit page_unsubscribe_record" id="unsubscribe_record_edit">
    <div class='warp'>
      <div class='container'>
        <div class='row diy_edit_content_box'>
          <div v-if="$check_field('set','unsubscribe_from_account') || $check_field('add','unsubscribe_from_account') || $check_field('get','unsubscribe_from_account')"
               class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								退订账号:
							</span>
            </div>
            <div class="diy_field diy_down">
              <select id="form_unsubscribe_from_account" :disabled="disabledObj['unsubscribe_from_account_isDisabled']" v-model="form['unsubscribe_from_account']"
                      v-if="(form['unsubscribe_from_account'] && $check_field('set','unsubscribe_from_account')) || (!form['unsubscribe_from_account'] && $check_field('add','unsubscribe_from_account'))">
                <option v-for="o in list_user_unsubscribe_from_account" :value="o['user_id']">
                  {{ o['nickname'] + '-' + o['username'] }}
                </option>
              </select>
              <span v-else-if="$check_field('get','unsubscribe_from_account')">{{ form['unsubscribe_from_account'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','user_name') || $check_field('add','user_name') || $check_field('get','user_name')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								用户姓名:
							</span>
            </div>
            <!-- 文本 -->
            <div class="diy_field diy_text">
              <input type="text" id="form_user_name" v-model="form['user_name']" placeholder="请输入用户姓名"
                     v-if="(form['user_name'] && $check_field('set','user_name')) || (!form['user_name'] && $check_field('add','user_name'))" :disabled="disabledObj['user_name_isDisabled']"/>
              <span v-else-if="$check_field('get','user_name')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','user_phone_number') || $check_field('add','user_phone_number') || $check_field('get','user_phone_number')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								用户电话:
							</span>
            </div>
            <!-- 文本 -->
            <div class="diy_field diy_text">
              <input type="text" id="form_user_phone_number" v-model="form['user_phone_number']" placeholder="请输入用户电话"
                     v-if="(form['user_phone_number'] && $check_field('set','user_phone_number')) || (!form['user_phone_number'] && $check_field('add','user_phone_number'))"
                     :disabled="disabledObj['user_phone_number_isDisabled']"/>
              <span v-else-if="$check_field('get','user_phone_number')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','booking_number') || $check_field('add','booking_number') || $check_field('get','booking_number')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								预订编号:
							</span>
            </div>
            <!-- 文本 -->
            <div class="diy_field diy_text">
              <input type="text" id="form_booking_number" v-model="form['booking_number']" placeholder="请输入预订编号"
                     v-if="(form['booking_number'] && $check_field('set','booking_number')) || (!form['booking_number'] && $check_field('add','booking_number'))"
                     :disabled="disabledObj['booking_number_isDisabled']"/>
              <span v-else-if="$check_field('get','booking_number')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','route_name') || $check_field('add','route_name') || $check_field('get','route_name')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								路线名称:
							</span>
            </div>
            <!-- 文本 -->
            <div class="diy_field diy_text">
              <input type="text" id="form_route_name" v-model="form['route_name']" placeholder="请输入路线名称"
                     v-if="(form['route_name'] && $check_field('set','route_name')) || (!form['route_name'] && $check_field('add','route_name'))" :disabled="disabledObj['route_name_isDisabled']"/>
              <span v-else-if="$check_field('get','route_name')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','route_number') || $check_field('add','route_number') || $check_field('get','route_number')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								路线编号:
							</span>
            </div>
            <!-- 文本 -->
            <div class="diy_field diy_text">
              <input type="text" id="form_route_number" v-model="form['route_number']" placeholder="请输入路线编号"
                     v-if="(form['route_number'] && $check_field('set','route_number')) || (!form['route_number'] && $check_field('add','route_number'))"
                     :disabled="disabledObj['route_number_isDisabled']"/>
              <span v-else-if="$check_field('get','route_number')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','unsubscribe_time') || $check_field('add','unsubscribe_time') || $check_field('get','unsubscribe_time')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								退订时间:
							</span>
            </div>
            <!-- 日长 -->
            <div class="diy_field diy_datetime">
              <input type="datetime-local" :disabled="disabledObj['unsubscribe_time_isDisabled']" id="form_unsubscribe_time" v-model="form['unsubscribe_time']" placeholder="请输入退订时间"
                     v-if="(form['unsubscribe_time'] && $check_field('set','unsubscribe_time')) || (!form['unsubscribe_time'] && $check_field('add','unsubscribe_time'))"/>
              <span v-else-if="$check_field('get','unsubscribe_time')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','reason_for_unsubscribing') || $check_field('add','reason_for_unsubscribing') || $check_field('get','reason_for_unsubscribing')"
               class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								退订原因:
							</span>
            </div>
            <!-- 多文本 -->
            <div class="diy_field diy_desc">
              <textarea id="form_reason_for_unsubscribing" v-model="form['reason_for_unsubscribing']"
                        v-if="(form['reason_for_unsubscribing'] && $check_field('set','reason_for_unsubscribing')) || (!form['reason_for_unsubscribing'] && $check_field('add','reason_for_unsubscribing'))"
                        :disabled="disabledObj['reason_for_unsubscribing_isDisabled']"/>
              <span v-else-if="$check_field('get','reason_for_unsubscribing')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','refund_amount') || $check_field('add','refund_amount') || $check_field('get','refund_amount')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								退款金额:
							</span>
            </div>
            <!-- 文本 -->
            <div class="diy_field diy_text">
              <input type="text" id="form_refund_amount" v-model="form['refund_amount']" placeholder="请输入退款金额"
                     v-if="(form['refund_amount'] && $check_field('set','refund_amount')) || (!form['refund_amount'] && $check_field('add','refund_amount'))"
                     :disabled="disabledObj['refund_amount_isDisabled']"/>
              <span v-else-if="$check_field('get','refund_amount')">{{ form['${obj.name}'] }}</span>
            </div>
          </div>
          <div v-if="$check_field('set','refund_details') || $check_field('add','refund_details') || $check_field('get','refund_details')" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								退款明细:
							</span>
            </div>
            <!-- 多文本 -->
            <div class="diy_field diy_desc">
              <textarea id="form_refund_details" v-model="form['refund_details']"
                        v-if="(form['refund_details'] && $check_field('set','refund_details')) || (!form['refund_details'] && $check_field('add','refund_details'))"
                        :disabled="disabledObj['refund_details_isDisabled']"/>
              <view v-else-if="$check_field('get','refund_details')" v-html="form['${obj.name}']"></view>
            </div>
          </div>


          <div v-if="user_group === '管理员' || $check_examine()" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								审核状态:
							</span>
            </div>
            <div class="diy_field diy_select" v-if="$check_action('/unsubscribe_record/edit','examine')">
              <!--<span> {{ form['examine_state'] }} </span>-->
              <select v-model="form['examine_state']">
                <option value="未审核">
                  未审核
                </option>
                <option value="已通过">
                  已通过
                </option>
                <option value="未通过">
                  未通过
                </option>
              </select>
            </div>
            <div class="diy_field diy_text" v-else>
							<span>
								{{ form['examine_state'] }}
							</span>
            </div>
          </div>
          <div v-if="user_group === '管理员' || $check_examine()" class="form-item col-12 col-md-6">
            <div class="diy_title">
							<span>
								审核回复:
							</span>
            </div>
            <div class="diy_field diy_desc" v-if="$check_action('/unsubscribe_record/edit','examine')">
              <textarea v-model="form['examine_reply']"></textarea>
            </div>
            <div class="diy_field diy_text" v-else>
							<span>
								{{ form['examine_reply'] }}
							</span>
            </div>
          </div>


        </div>
        <div class="diy_edit_submit_box row">
          <div class="col-12">
            <div class="btn_box">
              <button class="btn_submit" @click="submit()">提交</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixins/page.js";

export default {
  mixins: [mixin],
  components: {},
  data() {
    return {
      url_get_obj: "~/api/unsubscribe_record/get_obj?",
      url_add: "~/api/unsubscribe_record/add?",
      url_set: "~/api/unsubscribe_record/set?",

      // 登录权限
      oauth: {
        "signIn": true,
        "user_group": []
      },

      // 查询条件
      query: {
        "unsubscribe_from_account": 0,
        "user_name": "",
        "user_phone_number": "",
        "booking_number": "",
        "route_name": "",
        "route_number": "",
        "unsubscribe_time": "",
        "reason_for_unsubscribing": "",
        "refund_amount": "",
        "refund_details": "",
        "unsubscribe_record_id": 0,
      },

      obj: {
        "unsubscribe_from_account": 0, // 退订账号
        "user_name": '', // 用户姓名
        "user_phone_number": '', // 用户电话
        "booking_number": '', // 预订编号
        "route_name": '', // 路线名称
        "route_number": '', // 路线编号
        "unsubscribe_time": new Date().getTime(),
        "reason_for_unsubscribing": '', // 退订原因
        "refund_amount": '', // 退款金额
        "refund_details": '', // 退款明细
        "examine_state": "未审核",
        "examine_reply": "",
        "unsubscribe_record_id": 0,
      },

      // 表单字段
      form: {
        "unsubscribe_from_account": 0, // 退订账号
        "user_name": '', // 用户姓名
        "user_phone_number": '', // 用户电话
        "booking_number": '', // 预订编号
        "route_name": '', // 路线名称
        "route_number": '', // 路线编号
        "unsubscribe_time": new Date().getTime(),
        "reason_for_unsubscribing": '', // 退订原因
        "refund_amount": '', // 退款金额
        "refund_details": '', // 退款明细
        "examine_state": "未审核",
        "examine_reply": "",
        "unsubscribe_record_id": 0,
      },
      disabledObj: {
        "unsubscribe_from_account_isDisabled": false,
        "user_name_isDisabled": false,
        "user_phone_number_isDisabled": false,
        "booking_number_isDisabled": false,
        "route_name_isDisabled": false,
        "route_number_isDisabled": false,
        "unsubscribe_time_isDisabled": false,
        "reason_for_unsubscribing_isDisabled": false,
        "refund_amount_isDisabled": false,
        "refund_details_isDisabled": false,
      },

      // 用户列表
      list_user_unsubscribe_from_account: [],

      // ID字段
      field: "unsubscribe_record_id",

    }
  },
  methods: {
    /**
     * 提交前验证事件
     * @param {Object} 请求参数
     * @return {String} 验证成功返回null, 失败返回错误提示
     */
    submit_check(param) {
      if (!param.unsubscribe_time) {
        return "退订时间不能为空";
      }
      return null;
    },
    /**
     * 获取注册用户用户列表
     */
    async get_list_user_unsubscribe_from_account() {
      // if(this.user_group !== "管理员" && this.form["unsubscribe_from_account"] === 0) {
      //     this.form["unsubscribe_from_account"] = this.user.user_id;
      // }
      var json = await this.$get("~/api/user/get_list?user_group=注册用户");
      if (json.result && json.result.list) {
        this.list_user_unsubscribe_from_account = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    },
    async get_user_session_unsubscribe_from_account() {
      var _this = this;
      var json = await this.$get("~/api/user_group/get_obj?name=注册用户");
      if (json.result && json.result.obj) {
        var source_table = json.result.obj.source_table;
        var user_id = _this.$store.state.user.user_id;
        if (user_id) {
          var url = "~/api/" + source_table + "/get_obj?"
          this.$get(url, {"user_id": _this.$store.state.user.user_id}, function (res) {
            if (res.result && res.result.obj) {
              var arr = []
              for (let key in res.result.obj) {
                arr.push(key)
              }
              var arrForm = []
              for (let key in _this.form) {
                arrForm.push(key)
              }
              _this.form["unsubscribe_from_account"] = user_id
              _this.disabledObj['unsubscribe_from_account' + '_isDisabled'] = true
              for (var i = 0; i < arr.length; i++) {
                if (arr[i] !== 'examine_state' && arr[i] !== 'examine_reply') {
                  for (var j = 0; j < arrForm.length; j++) {
                    if (arr[i] === arrForm[j]) {
                      if (arr[i] !== "unsubscribe_from_account") {
                        _this.form[arrForm[j]] = res.result.obj[arr[i]]
                        _this.disabledObj[arrForm[j] + '_isDisabled'] = true
                        break;
                      }
                    }
                  }
                }
              }
            }
          });
        }
      } else if (json.error) {
        console.error(json.error);
      }
    },


    /**
     * 修改文件
     * @param { Object } files 上传文件对象
     * @param { String } str 表单的属性名
     */
    change_file(files, str) {
      var form = new FormData();
      form.append("file", files[0]);
      this.$post("~/api/unsubscribe_record/upload?", form, (res) => {
        if (res.result) {
          this.form[str] = res.result.url;
        } else if (res.error) {
          this.$toast(res.error.message);
        }
      });
    },

    /**
     * 获取对象后获取缓存表单
     * @param {Object} json
     * @param {Object} func
     */
    get_obj_before(param) {
      var form = $.db.get("form");
      // if (form) {
      //   delete(form.examine_state)
      //   delete(form.examine_reply)
      //   this.obj = $.push(this.obj ,form);
      // 	this.form = $.push(this.form ,form);
      // }
      // var arr = []
      // for (let key in form) {
      // 	arr.push(key)
      // }
      // for (var i=0;i<arr.length;i++){
      // 	this.disabledObj[arr[i] + '_isDisabled'] = true
      // }
      if (form) {
        var arr = []
        for (let key in form) {
          arr.push(key)
        }
        var arrForm = []
        for (let key in this.form) {
          arrForm.push(key)
        }
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] !== 'examine_state' && arr[i] !== 'examine_reply') {
            for (var j = 0; j < arrForm.length; j++) {
              if (arrForm[j] === arr[i]) {
                this.form[arrForm[j]] = form[arr[i]]
                this.obj[arrForm[j]] = form[arr[i]]
                this.disabledObj[arrForm[j] + '_isDisabled'] = true
                break;
              }
            }
          }
        }
      }
      if (this.form["unsubscribe_time"] && JSON.stringify(this.form["unsubscribe_time"]).indexOf("-") === -1) {
        this.form["unsubscribe_time"] = this.$toTime(parseInt(this.form["unsubscribe_time"]), "yyyy-MM-ddThh:mm")
      }

      $.db.del("form");
      return param;
    },

    /**
     * 获取对象后获取缓存表单
     * @param {Object} json
     * @param {Object} func
     */
    get_obj_after(json, func) {
      // var form = $.db.get("form");
      // var obj = Object.assign({} ,form ,this.obj);
      // if (obj) {
      //   delete(obj.examine_state)
      //   delete(obj.examine_reply)
      // 	this.obj = $.push(this.obj ,obj);
      // }
      // if (form) {
      //   delete(form.examine_state)
      //   delete(form.examine_reply)
      // 	this.form = $.push(this.form ,form);
      // }

      if (func) {
        func(json);
      }
    },

  },
  created() {
    this.get_user_session_unsubscribe_from_account();
    this.get_list_user_unsubscribe_from_account();
  },
}
</script>

<style>


</style>
